import {design} from "@/configuration/theme/design_config";
import {defineStore} from "pinia";
import {THEME} from "@/enums/design_enum";
import {store} from "@/store";
import {CrumbsConfig, DesignStyleConfig, HeaderConfig, MultiTabsConfig} from "@/configuration/theme/interfaces/theme";

type ThemeConfig = DesignStyleConfig;

function switchThemeClass(dark: boolean) {
    const html = document.querySelector('html');
    if (html) {
        dark ? html.classList.add(THEME.DARK) : html.classList.remove(THEME.DARK);
    }
}

const designStyleConfig = defineStore({
    id: 'app-design-style-config',
    state: (): ThemeConfig => ({
        ...design
    }),
    actions: {
        switchTheme() {
            this.darkTheme = !this.darkTheme;
            switchThemeClass(this.darkTheme);
        },
        switchBreadcrumb(){
            this.crumbsConfig.visible = !this.crumbsConfig.visible
        }
    },
    getters: {
        getDarkTheme(): boolean {
            return this.darkTheme;
        },
        getAppTheme(): string {
            return this.themeColor;
        },
        getAppThemeList(): string[] {
            return this.themeColorList;
        },
        getNavMode(): string {
            return this.navMode
        },
        getNavTheme(): string {
            return this.navTheme
        },
        getMultiTabsConfig(): MultiTabsConfig {
            return this.multiTabsConfig;
        },
        getHeaderConfig(): HeaderConfig {
            return this.headerConfig;
        },
        getCrumbsConfig(): CrumbsConfig {
            return this.crumbsConfig;
        },
        getRouterAnimate(): boolean {
            return this.routerAnimate;
        },
        getRouterAnimateMode(): string {
            return this.routerAnimateMode;
        }
    }
})


export default function designConfig() {
    return designStyleConfig(store);
}